import { useRequest } from "@/hooks/use-request";
import { useUserStore } from "@/stores/global/user";
import { antdUtils } from "@/utils/antd";
import { t } from "@/utils/i18n";
import { useMount } from "ahooks";
import { Flex, Table, Tag } from "antd";
import { ColumnsType } from "antd/es/table";
import { memo } from "react";
import { useNavigate } from "react-router-dom";
import { useImmer } from "use-immer";
import myService from "../service";

const MypProject = () => {
  const { currentUser } = useUserStore();
  const [porjectList, setPorjectList] = useImmer<any[]>([]);
  const navigate = useNavigate();
  const { runAsync: getMyProgetc } = useRequest(myService.getMyProject, {
    manual: true,
  });

  useMount(async () => {
    const [error, data] = await getMyProgetc(currentUser?.id);
    if (error) {
      antdUtils.message?.error(error);
    } else {
      setPorjectList(data as any);
    }
  });

  return (
    <Flex vertical className=" w-[100%] h-[84vh]">
      <Table
        rowKey="id"
        className=" w-[100%] h-[80vh]"
        title={() => t("ProjectsParticipatedIn") /**参与的项目 */}
        pagination={false}
        columns={projectColumns()}
        scroll={{ y: "70vh" }}
        dataSource={porjectList}
        onRow={(item) => {
          return {
            onClick: () => {
              navigate(`/my/planList`, { state: item });
            },
          };
        }}
      ></Table>
    </Flex>
  );
};

const projectColumns = (): ColumnsType<any> => {
  return [
    {
      title: t("ProjectName") /** 项目名 */,
      dataIndex: "name",
      key: "name",
      width: 200,
      fixed: "left",
    },
    {
      title: t("number") /** 编号*/,
      dataIndex: "number",
      key: "number",
      width: 150,
    },
    {
      title: t("startTime") /** 开始时间*/,
      dataIndex: "startTime",
      key: "startTime",
      width: 125,
    },
    {
      title: t("ExpectedEndTime") /** 预计结束时间 */,
      dataIndex: "endTime",
      key: "endTime",
      width: 125,
    },
    {
      title: t("Participants") /** 参与人员 */,
      dataIndex: "users",
      key: "users",
      width: 400,
      render: (_: any, item: any) => (
        <>
          {JSON.parse(item.users ? item.users : "[]").map((user: any) => {
            return <Tag key={user.id}>{user.nickName}</Tag>;
          })}
        </>
      ),
    },
    {
      title: t("describe") /**描述 */,
      dataIndex: "describe",
      key: "describe",
      width: 400,
    },
    {
      title: t("notes") /** 备注 */,
      dataIndex: "notes",
      key: "notes",
      width: 400,
    },
  ];
};

export default memo(MypProject);
